<template>
  <div class="flex mobilChat">
    <div class="contAllThree">
      <div
        class="AllOne marginRight flex flex-direction mobil"
        :style="{ height: screenHeight + 'px', width: '330px' }"
        v-show="appearanceShow"
      >
        <div class="fixRit flex-1" ref="myDiv">
          <div class="top">
            <div class="flex-1">
              <div class="dt">
                描述
                <!-- <div class="more" @click="handleAdd2">更多</div> -->
              </div>
              <textarea
                class="chat-input labelMargin"
                placeholder="描述词越详细,生成的图片效果更加真实哦~."
                v-model="newImage"
                maxlength="200"
              ></textarea>
              <div class="dt">图片尺寸</div>
              <div class="picture-box labelMargin">
                <div
                  :class="['picture-size', '1' === pictureIndex ? 'picture-size-active' : '']"
                  @click="btnPicture('1', '1024x1024')"
                >
                  <div class="text-rect-box"><div class="text-rect rect"></div></div>
                  <div class="text-base">1024x1024</div>
                  <div class="text-xs">头像图</div>
                </div>
                <div
                  :class="['picture-size', '2' === pictureIndex ? 'picture-size-active' : '']"
                  @click="btnPicture('2', '1024x1792')"
                >
                  <div class="text-rect-box">
                    <div class="text-rect rect-two"></div>
                  </div>

                  <div class="text-base">1024x1792</div>
                  <div class="text-xs">宣传海报</div>
                </div>
                <div
                  :class="['picture-size', '3' === pictureIndex ? 'picture-size-active' : '']"
                  @click="btnPicture('3', '1792x1024')"
                >
                  <div class="text-rect-box">
                    <div class="text-rect rect-three"></div>
                  </div>

                  <div class="text-base">1792x1024</div>
                  <div class="text-xs">电脑壁纸</div>
                </div>
              </div>
              <div class="dt">质量</div>
              <div class="quZhiLia labelMargin">
                <div :class="['h1', '1' === zhiLiaIndex ? 'active' : '']" @click="btnZhiLia('1', 'standard')">
                  standard
                  <div class="br">标准</div>
                </div>
                <div :class="['h1', '2' === zhiLiaIndex ? 'active' : '']" @click="btnZhiLia('2', 'hd')">
                  hd
                  <div class="br">高清</div>
                </div>
              </div>
              <div class="dt">风格</div>
              <div class="quZhiLia labelMargin">
                <div :class="['h2', '1' === zhiLiaIndex1 ? 'active' : '']" @click="btnZhiLia1('1', 'vivid')">
                  vivid
                  <div class="br">生动</div>
                </div>
                <div :class="['h2', '2' === zhiLiaIndex1 ? 'active' : '']" @click="btnZhiLia1('2', 'natural')">
                  natural
                  <div class="br">自然</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <button :class="['chat-atn', isInputEmpty ? 'disable' : 'active']" @click="sendImage" :disable="isInputEmpty">
          立即生成
        </button>
      </div>
    </div>
    <div class="flex flex-direction flex-1" v-if="!appearanceShow || screenWidth >= 767">
      <div class="chat-container navMarginTop dramMain marginRight" :style="{ height: screenHeightBg }">
        <div class="timeList">
          <h6>生成结果</h6>
          <div class="">
            <div class="outerLayer flex flex-direction">
              <a-tabs defaultActiveKey="1" @change="callbackTab">
                <a-tab-pane tab="当前绘画" key="1"> </a-tab-pane>
                <a-tab-pane tab="历史绘画" key="2" forceRender> </a-tab-pane>
              </a-tabs>
              <div class="outerLayerMain flex-1" v-if="draTabIndex === '1'">
                <!-- 绘画 -->
                <div class="middle_con" ref="myDiv">
                  <div class="middle_top">
                    <div class="main_image">
                      <div class="image_container" v-if="imgShowBool && !imgLoading">
                        <img src="https://66.leinwin.com/img/paint_default.d02f68cd.png" alt="" />
                        <div class="title">生成的图片将会显示在这里</div>
                        <div class="desc">请输入创意，生成你的作品吧</div>
                      </div>
                      <div class="main_sc" v-if="!imgShowBool" v-viewer>
                        <img :src="imgShow" />
                      </div>
                      <div class="main_sc" v-if="imgLoading">
                        <div class="message-text">
                          正在生成中,图片较大,请等待30s-60s左右...
                          <div class="loading"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 绘画结束 -->
                <!-- 
                <div class="fixLef">
                  <div class="top">
                    <div class="dt">
                    历史生成
                    <div class="more" @click="handleAdd2">更多</div>
                  </div>
                    <div class="ul">
                      <div
                        class="li"
                        v-for="(item, index) in evenList[0].list"
                        :key="index"
                        @click="changeImage(item.image)"
                      >
                        <img :src="getAvatar(item.image)" :preview="evenList[0].role" v-if="item.image !== undefined" />
                        <div class="mark">
                          <div class="title">{{ item.revisedPrompt }}</div>
                          <div class="markBom">
                            <div class="markBomLef">
                              <img src="@assets/chatlogo.jpg" alt="" />
                              <div class="h3">{{ item.createBy }}</div>
                            </div>
                            <div class="markBomRit" @click="copyText(item.revisedPrompt)">
                              <i class="iconfont icon-bianji"></i>
                              <div class="h3">复制</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="moreBok">
                      <div class="lookMore" @click="handleAdd2" v-if="copyData.length >= 9">查看更多</div>
                      <div class="noLookMore" v-else>暂无更多</div>
                    </div>
                  </div>
                </div> -->
              </div>
            </div>
          </div>
          <div class="paintingMain flex-1" v-show="draTabIndex === '2'">
            <waterfall :imageData="evenList[0].list" ref="container" :columnCount="columnCount" :waterType="waterType"> </waterfall>
          </div>
          <div v-if="draTabIndex === '2'">
            <div class="btnMoreLoading copy" v-if="bomCrl && !empty" @click="clickLoadMore">点击加载更多</div>
            <!-- <div class="btnMoreLoading" v-if="!bomCrl && empty">
              正在加载中
              <div class="loading"></div>
            </div> -->
            <div v-if="empty" class="btnMoreLoading" style="color: #ccc">
              <span
                >没有更多了
                <div class="loading" v-if="!bomCrl && empty"></div
              ></span>
            </div>
          </div>
        </div>
        <!-- <chat-history-img ref="modalForm2" @ok="modalFormOk2" :listData="copyData"></chat-history-img> -->
        <member-model ref="modalMember" v-if="memberShow"></member-model>
      </div>
      <global-footer />
    </div>
    <div class="chatWang inputSend">
      <div class="appearanceBox">
        <div :class="['appearance', !appearanceShow ? 'copy' : '']" @click="submitGenerate">生成结果</div>
        <div :class="['appearance', appearanceShow ? 'copy' : '']" @click="submitGenerate">绘画中心</div>
      </div>

      <!-- <div class="chatFunction">
                      <button class="chat-atn middle pop" @click="handleAdd2">
                        <i class="iconfont icon-lightning"></i>
                        历史生成
                      </button>
                    </div>
                    <div class="chat-messages">
                      <input
                        class="chat-input"
                        v-model="newImage"
                        @keyup.enter="sendImage"
                        placeholder="请输入内容..."
                      />
                      <button
                        :class="['chat-atn', isInputEmpty ? 'disable' : 'active']"
                        @click="sendImage"
                        :disable="isInputEmpty"
                      >
                        发送
                      </button>
                    </div> -->
    </div>
  </div>
</template>
  
<script>
import ChatHistoryImg from './ChatHistoryImg'
import { EventSourcePolyfill } from 'event-source-polyfill'
import { fetchEventSource } from '@microsoft/fetch-event-source'
import { getFileAccessHttpUrl, getAction } from '@/api/manage'
import Waterfall from './component/Waterfall'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { mapActions, mapGetters, mapState } from 'vuex'
import GlobalFooter from '@/components/page/GlobalFooter'
import MemberModel from './component/MemberModel' //付费跳转弹框

//   import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
  name: 'ChatModelDraw',
  mixins: [],
  components: {
    ChatHistoryImg,
    GlobalFooter,
    MemberModel,
    Waterfall,
  },
  data() {
    return {
      waterType:'history',
      appearanceShow: true,
      columnCount: 4,
      pageNo: 1,
      pageSize: 20,
      bomCrl: true,
      empty: false,
      inputVal: '',
      pictureIndex: '1',
      draTabIndex: '1',
      imageSize: '1024x1024',
      zhiLiaIndex: '1',
      zhiLiaSize: 'standard',
      zhiLiaIndex1: '1',
      zhiLiaSize1: 'vivid',
      memberShow: false,
      url: {
        list: '/sys/role/list',
      },
      listData: [],
      listData2: [
        { role: 'user', list: [{}] },
        { role: 'assistant', list: [{ content: '' }] },
      ],
      copyData: [
        { role: 'user', list: [{}] },
        { role: 'assistant', list: [{ content: '' }] },
      ],
      imgShow: '',
      imgShowBool: true,
      imgLoading: false,
      timer: null,
      wen: '',
      messages: [],
      newMessage: '',
      newImage: '',
      oldScrollTop: 0,
      scrollFlag: true,
      Intervall: null,
      activeStep: '', // 默认选中的锚点的key值
      offsetTop: 0,
      serverHTML: '',
      ActiveKey: '1',
      screenWidth: '',
      screenHeight: '',
      screenHeightBg: '',
      newList: [
        { role: 'user', list: [{}] },
        { role: 'assistant', list: [{}] },
      ],
    }
  },
  render(h) {
    return h('div', {
      class: 'md',
      domProps: {
        innerHTML: this.text,
      },
    })
  },
  directives: {
    scroll: {
      inserted(el) {
        el.scrollIntoView()
      },
    },
  },
  computed: {
    isInputEmpty() {
      return this.newImage.trim() === ''
    },
    evenList: function () {
      let list = this.copyData
      this.newList[0].list = list
      var array = this.newList
      console.log('array', array)
      return array
    },
  },
  watch: {},

  mounted() {
    //查询聊天记录
    // this.workplaceTeams('', 'query')

    this.$nextTick(function () {
      this.screenWidth = window.innerWidth
      this.screenHeight = window.innerHeight
      this.columnCount = this.screenWidth <= 767 ? 2 : 4
      this.screenHeightBg = this.screenHeight - 120 + 'px'
      this.callback()
    })
  },
  beforeDestroy() {
    //清除定时器
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    //移动端-历史记录和生成区分
    submitGenerate() {
      this.appearanceShow = !this.appearanceShow
      if(this.appearanceShow === true){
        this.draTabIndex = '1'
      }
    },
    //复制
    copyText(data) {
      const text = data // 要复制的文本内容
      const el = document.createElement('textarea')
      el.value = text
      document.body.appendChild(el)
      el.select()
      document.execCommand('copy')
      document.body.removeChild(el)
      this.$message.success('文本已复制')
    },

    // 选择统计图类别
    callbackTab(key) {
      console.log('key', key)
      this.draTabIndex = key
      if (this.draTabIndex === '2') {
        this.$refs.container.goSetIerVal()
      }
    },
    changeImage(image) {
      this.imgShowBool = false
      this.imgShow = this.getAvatar(image)
    },
    getAvatar(img) {
      // console.log('getFileAccessHttpUrl(this.avatar())', getFileAccessHttpUrl(img))
      return getFileAccessHttpUrl(img)
    },
    btnPicture(index, size) {
      this.pictureIndex = index
      this.imageSize = size
    },
    btnZhiLia(index, type) {
      this.zhiLiaIndex = index
      this.zhiLiaSize = type
    },
    btnZhiLia1(index, type) {
      this.zhiLiaIndex1 = index
      this.zhiLiaSize1 = type
    },
    clickLoadMore() {
      this.bomCrl = false
      this.pageNo++
      this.callback()
    },
    //选项卡下标
    callback(key) {
      console.log(key)
      this.imgShowBool = true
      this.imgLoading = false
      let obj = {
        prompt: this.inputVal,
        n: 1,
        size: this.imageSize,
        quality: this.zhiLiaSize,
        style: this.zhiLiaSize1,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      }
      getAction('/imagerecord/api/list', obj)
        .then((res) => {
          console.log('res', res)
          if (res.result.length !== 0) {
            if (this.draTabIndex === '2') {
              this.$refs.container.goSetIerVal()
            }
            if (this.pageNo !== 1) {
              this.bomCrl = true
              this.empty = false
              this.copyData = this.copyData.concat(res.result.records)
              if (res.result.records.length === 0) {
                this.empty = true
                this.bomCrl = true
              }
            } else {
              this.bomCrl = true
              this.empty = false
              this.copyData = res.result.records
            }
          }

          // this.$refs.modalForm2.getListGroupBy(this.listData2,'role')
        })
        .catch((error) => {
          console.log('error', error)
          // 处理请求失败
        })
    },
    //滚动条保持最底部方法
    // scrollToBottom() {
    //   this.$nextTick(() => {
    //     var container = this.$el.querySelector('.chat')
    //     container.scrollTop = container.scrollHeight
    //   })
    // },
    handleAdd: function () {
      this.$refs.modalForm.add()
      this.$refs.modalForm.title = '提示词模板'
      this.$refs.modalForm.disableSubmit = false
    },
    handleAdd1: function () {
      this.$refs.modalForm1.add()
      this.$refs.modalForm1.title = '对话记录'
      this.$refs.modalForm1.disableSubmit = false
    },
    handleAdd2: function () {
      this.$refs.modalForm2.add()
      this.$refs.modalForm2.title = '历史图片生成'
      this.$refs.modalForm2.disableSubmit = true
    },
    modalFormOk(data) {
      console.log('data', data)
      this.newMessage = data.content
    },
    modalFormOk1(data) {
      console.log(data)
      this.activeStep = data.id
      const element = document.getElementById('item-' + data.id)
      const content = this.$refs.myElement
      console.log(element.offsetTop, content.offsetTop)
      if (element && content) {
        const scrollTop = element.offsetTop - content.offsetTop
        content.scrollTop = scrollTop
      }
    },
    modalFormOk2() {},
    //复制
    copyText(data) {
      const text = data // 要复制的文本内容
      const el = document.createElement('textarea')
      el.value = text
      document.body.appendChild(el)
      el.select()
      document.execCommand('copy')
      document.body.removeChild(el)
      this.$message.success('文本已复制')
    },
    checkWordCount(e) {
      if (e.isTrusted) {
        console.log('e', e)
        this.newImage = e.data
      }
    },
    //图片
    sendImage() {
      console.log('this.newImage', this.newImage)
      if (this.newImage.trim() !== '') {
        if (this.screenWidth <= 767) {
          this.appearanceShow = false
        }
        this.imgShowBool = true
        this.imgLoading = true
        let obj = {
          prompt: this.newImage,
          n: 1,
          size: this.imageSize,
          quality: this.zhiLiaSize,
          style: this.zhiLiaSize1,
        }
        this.$http
          .post('/imagerecord/api/draw', obj)
          .then((res) => {
            console.log('res', res)
            if (res.code === 500) {
              this.$notification.warn({
                message: '提示',
                description: res.message,
                duration: 5,
              })
              this.memberShow = true
              this.imgShowBool = true
              this.imgLoading = false
            } else if (res.code === 501) {
              this.$notification.warn({
                message: '提示',
                description: res.message,
                duration: 5,
              })
              this.imgShowBool = true
              this.imgLoading = false
            } else {
              this.imgShowBool = false
              this.imgLoading = false
              this.copyData.push(res.result)
              this.imgShow = this.getAvatar(res.result.image)
              this.$message.success('生成图片成功！')
              // this.evenList()
              this.newMessage = ''
              this.$store.dispatch('userLimitList', { userId: this.userInfo().id })
            }
          })
          .catch((error) => {
            console.log('error', error)
            // 处理请求失败
          })
        this.newImage = ''
      }
    },
    //琢个字显示
    characters(meg) {
      this.data = meg
      this.wen = ''
      //声明一个变量，用来监听要分割的长度
      var wenLen = 0
      this.timer = setInterval(() => {
        //取到data.content的第wenLen位
        this.wen = this.data.substr(0, wenLen)

        //wenLen大于data.content的长度，停止计时器
        if (wenLen < this.data.length) {
          wenLen++
        } else {
          clearInterval(this.timer)
          // return
        }
        // console.log(' this.wen', this.wen)
        this.$set(this.messages[this.messages.length - 1], 'content', this.wen)
      }, 50)
    },
    output(meg) {
      let arr = [
        {
          content: meg,
          role: 'user',
        },
      ]
      let source = new EventSourcePolyfill('http://192.168.0.54:8080/jeecg-boot/openai/api/ask', {
        method: 'POST',
        headers: {
          'X-Access-Token': this.$ls.get(ACCESS_TOKEN),
          'Content-Type': 'application/json',
        },
        // mode: "cors",
        // cache: "no-cache",
        data: JSON.stringify(arr),
        onopen(response) {
          console.log('eventSource open : ', response)
        },
        onmessage(event) {
          console.log('eventSource msg1 :', event)
        },
        onerror(err) {
          console.log('eventSource error: ' + err)
        },
        onclose() {
          console.log('eventSource close')
        },
      })
      //   let innerHTML = ''
      source.onmessage = function (e) {
        console.log('e', e)
        if (e.data == '[done]') {
          source.close()
        } else {
          innerHTML += e.data
          document.getElementById('message').innerHTML = innerHTML
        }
      }
    },
  },
}
</script>
  
  <style lang="less" scoped>
// .footer {
//   display: none !important;
// }
.chat-container {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
  overflow: hidden auto;
  box-sizing: border-box;
}
.chatFunction {
  float: left;
  width: 100%;
  padding-top: 10px;
  position: relative;
}
.chat-atn {
  &.pop {
    color: #7a46fc;
    background: transparent;
    border-color: #7a46fc;
  }
  &.middle {
    height: 35px;
    padding: 0 23px;
    line-height: 35px;
    float: left;
    margin-right: 10px;
  }
}
.chatWang {
  display: none;
}
.chat-messages {
  display: flex;
  align-items: center;
  margin: 12px 0 20px 0;
  float: left;
  width: 100%;
  .chat-input {
    flex: 1;
    border: none;
    outline: none;
    resize: none;
    border-radius: 8px;
    height: 60px;
    line-height: 20px;
    padding: 10px 20px;
    margin-right: 10px;
    background: #f7f7f7;
  }
}

.chat-atn {
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  touch-action: manipulation;
  height: 45px;
  padding: 4px 15px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.25);
  background: #f5f5f5;
  border-color: #d9d9d9;
  text-shadow: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  &.disable {
    cursor: not-allowed;
  }
  &.active {
    // box-shadow: 0 2px 0 rgb(0 0 0 / 2%);
    background: #7a46fc;
    border-color: #7a46fc;
    color: white;
    cursor: pointer;
  }
  .iconfont {
    margin-right: 5px;
  }
}
.chat-atn:hover {
  opacity: 0.7;
}
.chat {
  height: 450px;
  overflow-y: auto;
  .classify.right {
    width: 100%;
    text-align: right;
    display: block;
    .chatBox {
      width: 100%;
      display: flex;
      flex-direction: row-reverse;
    }
    .message {
      float: right;
    }
    img {
      margin-left: 10px;
    }
    .message-text {
      text-align: left;
      &.active {
        // background: linear-gradient(to bottom,blue,red);
        animation-name: blink;
        animation-duration: 5s;
      }
      @keyframes blink {
        0% {
          opacity: 1;
          color: red;
        }
        50% {
          opacity: 0.8;
          color: red;
        }
        70% {
          opacity: 0.6;
        }
        100% {
          opacity: 1;
        }
      }
    }
    .iconList {
      margin-right: 10px;
    }
  }
  .classify.left {
    .message {
      float: left;
    }
    img {
      margin-right: 10px;
    }
    .iconList {
      margin-left: 10px;
    }
  }
  .classify {
    margin-bottom: 20px;
    float: left;
    width: 100%;
    .chatBox {
      display: flex;
      align-items: center;
      .chat-header {
        float: left;
        img {
          width: 40px;
          height: 40px;
        }
      }
      .messages {
        max-width: 80%;
        float: left;
        .message {
        }
      }
    }
  }
  .message-text {
    background-color: #f7f7f7;
    padding: 10px 20px;
    border-radius: 8px;
    color: #24292f;
    font-size: 15px;
  }
}
.iconList {
  .iconDt {
    background: #f7f7f7;
    border-radius: 20px;
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.ant-btn {
  border: unset;
  border-color: unset;
}
.loading {
  width: 22px;
  height: 22px;
  border: 2px solid #1890ff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: rotate 0.75s linear infinite;
  float: right;
  margin-left: 4px;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

// AI绘画
.middle_con {
  width: 78%;
  height: 100%;
  height: 100%;
  margin: auto;
  .middle_top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .main_image {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 20px;
      .image_container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        img {
          width: 71%;
          height: 95%;
          -o-object-fit: cover;
          object-fit: cover;
        }
        .title {
          color: #333;
          font-size: 16px;
          font-weight: 600;
        }
        .desc {
          color: #999;
          margin-top: 10px;
        }
      }
    }
  }
}
.main_sc {
  width: 400px;
  height: 400px;
  img {
    width: 100%;
    border: none;
    cursor: pointer;
  }
}

.main_sc .message-text {
  background-color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
}
.fixBoom {
  position: absolute;
  bottom: 7px;
  left: 50%;
  width: 100px;
  color: black;
  background: transparent;
  border: 1px solid black;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
}
.fixBoom:hover {
  opacity: 0.7;
}
.fixLef {
  // position: fixed;
  // top: 0;
  // left: 0;
  // bottom: 0;
  // width: 20%;
  float: left;
  // background: #f7f7f7;
  border-radius: 10px;
  z-index: 0;
  height: 100%;
  width: 100%;
  .top {
    height: 100%;
    width: 100%;
    overflow: hidden auto;
    .dt {
      font-weight: bold;
      color: #333333;
      .more {
        float: right;
        font-size: 12px;
        color: #999;
        cursor: pointer;
      }
    }
    .ul {
      margin-left: -5px;
      margin-right: -5px;
      column-gap: 0;
      column-count: 4;
      .li {
        overflow: hidden;
        border-radius: 20px;
        margin: 5px;
        img {
          width: 100%;
          float: left;
          // margin-bottom: 8px;
          cursor: pointer;
          transition: all 0.3s;
        }
        margin-bottom: 5px;
        display: inline;
        position: relative;
        float: left;
        .mark {
          position: absolute;
          background: rgba(0, 0, 0, 0.3);
          left: 0;
          right: 0;
          bottom: -10px;
          opacity: 0;
          display: flex;
          flex-direction: column;
          margin: 0 10px 14px 10px;
          border-radius: 8px;
          transition: all 0.3s;
          padding: 10px;
          .title {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            /* autoprefixer: off*/
            -webkit-box-orient: vertical;
            /* autoprefixer: on*/
            font-size: 12px;
            float: left;
            width: 100%;
            color: white;
          }
          .markBom {
            margin-top: 10px;
            color: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .markBomLef {
              color: white;
              display: flex;
              align-items: center;
              .h3 {
                width: 50px;
                overflow: hidden;
              }
              img {
                width: 28px;
                border-radius: 30px;
                margin-right: 5px;
              }
            }
            .markBomRit {
              display: flex;
              align-items: center;
              cursor: pointer;
              .h3 {
                margin-left: 5px;
              }
            }
          }
        }
        &:hover {
          img {
            transform: scale(1.1);
          }
          .mark {
            bottom: 0;
            opacity: 1;
          }
        }
      }
    }
  }
  .moreBok {
    width: 100%;
    float: left;
    text-align: center;
    .lookMore {
      background: linear-gradient(90deg, #78ffd7, #c3fe85);
      display: inline-block;
      margin: auto;
      width: 138px;
      height: 40px;
      border-radius: 25px;
      border: none;
      margin-top: 10px;
      cursor: pointer;
      color: black;
      line-height: 40px;
      text-align: center;
    }
    .lookMore:hover {
      opacity: 0.7;
    }
    .noLookMore {
      color: black;
      margin-top: 10px;
      color: #999;
    }
  }
}

.fixRit {
  // width: 20%;
  background: #f7f7f7;
  padding: 30px 14px 10px 14px;
  z-index: 0;
  border-radius: 10px;
  .top {
    display: flex;
    flex-direction: column;
    height: 100%;
    .dt {
      font-weight: bold;
      color: #333333;
      .more {
        float: right;
        font-size: 12px;
        color: #999;
        cursor: pointer;
      }
    }
    .chat-input {
      border: none;
      background-color: white;
      border-radius: 10px;
      height: 118px;
      min-height: 118px;
      max-height: 118px;
      overflow-y: hidden;
      resize: none;
      width: 100%;
      font-variant: tabular-nums;
      list-style: none;
      font-feature-settings: 'tnum';
      display: inline-block;
      width: 100%;
      padding: 4px 11px;
      color: rgba(0, 0, 0, 0.85);
      font-size: 14px;
      margin-top: 10px;
      outline: medium;
    }
    .chat-atn.disable,
    .chat-atn {
      margin-top: 20px;
      width: 100%;
    }
    .chat-atn.active {
      padding: 6px 27px;
      background: linear-gradient(90deg, #938bff, #ff97f2);
      border-radius: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      cursor: pointer;
      border: unset;
    }
    ::-webkit-scrollbar-track {
      background: #f7f7f7;
    }
  }
}
/deep/.ant-layout-header {
  z-index: 8;
}

.labelMargin {
  margin-bottom: 15px;
  float: left;
  width: 100%;
}
.picture-box {
  display: flex;
  justify-content: space-between;
  .picture-size {
    border: 1px solid #b2b3b5;
    border-radius: 8px;
    height: 110px;
    margin-top: 10px;
    transition: all 0.5s;
    user-select: none;
    width: 30%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    font-size: 12px;
    .text-base {
      margin: 3px 0;
      font-size: 13px;
    }
    .text-rect-box {
      height: 20px;
      display: flex;
      align-items: center;
    }

    .text-rect {
      width: 20px;
      height: 20px;
      border: 2px solid #101010;
      border-radius: 4px;
    }
    .rect-two {
      width: 10px;
      height: 20px;
      border: 2px solid #101010;
      border-radius: 4px;
    }
    .rect-three {
      width: 20px;
      height: 10px;
      border: 2px solid #101010;
      border-radius: 4px;
    }
    &.picture-size-active {
      background-color: rgb(230, 247, 255);
      border: 2px solid #00abff;
      .rect-two,
      .rect {
        border: 2px solid #00abff;
      }
      .text-base {
        color: #00abff;
      }
      .text-xs {
        color: #00abff;
      }
    }
  }
}

.quZhiLia {
  margin-top: 10px;
  .h1 {
    float: left;
    height: 76px;
    width: 48%;
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.1s;
    cursor: pointer;
    &:nth-child(1) {
      background: url('../../assets/chat/standard.jpg') no-repeat;
      background-size: 100% 100%;
      margin-right: 4%;
    }
    &:nth-child(2) {
      background: url('../../assets/chat/hd.jpeg') no-repeat;
      background-size: 100% 100%;
    }
    &.active {
      border: 4px solid #00abff;
    }
  }

  .h2 {
    float: left;
    height: 76px;
    width: 48%;
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.1s;
    &:nth-child(1) {
      background: url('../../assets/chat/vivid.jpeg') no-repeat;
      background-size: 100% 100%;
      margin-right: 4%;
    }
    &:nth-child(2) {
      background: url('../../assets/chat/natural.jpeg') no-repeat;
      background-size: 100% 100%;
    }
    &.active {
      border: 4px solid #00abff;
    }
  }
}

.contAllThree {
  .AllOne {
    width: auto;
    border-radius: unset;
  }
}

.dramMain {
  background: white;
  padding: 14px;
  border-radius: 6px;
}

.timeList {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  h6 {
    font-size: 14px;
    font-weight: bold;
    margin-top: 9px;
  }
  .outerLayer {
    height: 100%;
  }
}

.btnMoreLoading {
  cursor: pointer;
  color: #fff;
  text-align: center;
  font-size: 14px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  &.copy {
    background: linear-gradient(90deg, #938bff, #ff97f2);
    padding: 10px 0;
    border-radius: 30px;
    width: 300px;
    margin: 10px auto 0;
  }
}


.outerLayerMain {
  flex: 1;
}
@media screen and (max-width: 767px) {
  .fixLef,
  // .fixRit {
  //   display: none;
  // }
  .fixRit{
    margin-top: 50px;
  }
  .middle_con {
    width: 100%;
    padding: 10px 0 0 0;
  }
  .chatWang {
    display: block;
    box-shadow: rgb(0 0 0 / 20%) 0px 0px 2px;
    .appearanceBox{
      display: flex;
    justify-content: space-around;
    background: #f3f3f3;
    height: 45px;
    line-height: 45px;
    border-radius: 30px;
    overflow: hidden;
    .appearance{
      width: 50%;
      text-align: center;
      font-size: 16px;

      &.copy{
        background: #00abff;
        border-radius: 30px;
        font-weight: bold;
      } 
    }
    }
  }
  // .chat-messages{
  //   .chat-input{
  //     background: #f7f7f7;
  //   }
  // }
  .contAllThree{
    .AllOne{
      &.mobil{
        height: auto!important;
        padding-bottom: 60px;
      }
    }
  } 
  .picture-box{
    display: unset;
    .picture-size{
      float: left;
      margin-right: 3%;
      width: 31.333%;
      &:nth-last-child(1){
        margin-right: 0;
      }
    }
  }
  .mobilChat{
    flex-direction: column;
  }
  .middle_con{
    .middle_top {
      .main_image{
       padding: 0;
       padding-bottom: 20px;
      .main_sc{
        width: 100%;
      }
    }
    }
  }
  .btnMoreLoading{
    &.copy{
      width: 100%;
    padding: 7px 0;
    }
  }


}
</style>
  